<template>
  <div class="audioUtils">
    <div class="no-audio">没电了</div>
    <div class="singleRecording">
      <div class="audio-player" @click="startRecording"></div>
      <div class="config">
        <div>麦克风设置</div>
        <div @click="handleUpload">文件上传</div>
      </div>
      <div class="audio-select">
        <el-select v-model="selectedDevice" placeholder="请选择麦克风" @change="switchSpeakers">
          <el-option
            v-for="device in audioDevices"
            :key="device.deviceId"
            :label="device.label"
            :disabled="device.disabled"
            :value="device.deviceId"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import audioRecorder from '@/utils/recordingSettings'

const selectedDevice = ref('')
interface MediaDeviceInfo {
  deviceId: string
  label: string
  kind: string
  disabled: boolean
}
const audioDevices = ref<MediaDeviceInfo[]>([])
const switchSpeakers = async (deviceId: string) => {
  await window.electron.ipcRenderer.invoke('switch-speakers', deviceId)
}
const backupDisplay = ref('')
const init = async () => {
  audioDevices.value = (await audioRecorder
    .getAudioDevices()
    .then((d) => d.outputs)) as MediaDeviceInfo[]
  selectedDevice.value = await audioRecorder.getDefaultMicrophone(0).then((d) => d.deviceId)
  backupDisplay.value = cloneDeep(selectedDevice.value)
}
const emit = defineEmits(['recording'])
//上传文件
const handleUpload = async () => {
  const file = await window.electron.ipcRenderer.invoke('open-file', 'audio')
  console.log('上传文件', file)
}
const startRecording = () => {
  emit('recording')
}
onMounted(async () => {
  init()
})
</script>

<style scoped lang="scss">
.audioUtils {
  padding-top: 40px;
  position: relative;
}
.no-audio {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: red;
}
.singleRecording {
  position: relative;
  padding: 20px;
  height: 140px;
  background: #d6e9ff;
  border-radius: 16px;
  border: 3px solid #ffffff;
  box-sizing: border-box;
}
.audio-player {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: linear-gradient(147deg, #00ceff 0%, #9236f9 100%);
  // overflow: hidden;
  //边框渐变色linear-gradient(45deg, red, blue);
}
.config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #518df1;
  cursor: pointer;
}
.audio-select {
  margin-top: 20px;
}
</style>
